import { Form, Button, Input, Select } from 'antd'

const SearchBar = (props) => {
  const [form] = Form.useForm()
  const { onFinish, handleResetClick } = props

  return (
    <Form
      form={form}
      // initialValues={{ layout: 'inline' }}
      onFinish={onFinish}
      layout="inline"
      // wrapperCol={{ span: 12, offset: 0 }}
    >
      <Form.Item name="countryName" label="国家">
        <Input />
      </Form.Item>
      <Form.Item name="continent" label="所属区域">
        <Select value="" style={{ width: 150 }}>
          <Select.Option key={1} value={'亚洲'}>
            亚洲
          </Select.Option>
          <Select.Option key={2} value={'欧洲'}>
            欧洲
          </Select.Option>
          <Select.Option key={3} value={'美洲'}>
            美洲
          </Select.Option>
          <Select.Option key={4} value={'大洋洲'}>
            大洋洲
          </Select.Option>
          <Select.Option key={5} value={'非洲'}>
            非洲
          </Select.Option>
        </Select>
      </Form.Item>
      <Form.Item name="nature" label="国家性质">
        <Select value="" style={{ width: 150 }}>
          <Select.Option key={3} value={'社会主义共和国'}>
            社会主义共和国
          </Select.Option>
          <Select.Option key={4} value={'资本主义共和国'}>
            资本主义共和国
          </Select.Option>
          <Select.Option key={5} value={'资本主义君主立宪'}>
            非洲
          </Select.Option>
        </Select>
        {/* <Select value="亚洲"> */}
      </Form.Item>
      <Form.Item name="continent">
        <Button style={{ flex: 1 }} htmlType="submit">
          提交搜索
        </Button>
        <Button
          style={{ flex: 1 }}
          onClick={() => {
            form.setFieldsValue({ countryName: '', continent: '', nature: '' })
            handleResetClick && handleResetClick()
          }}
        >
          重置
        </Button>
      </Form.Item>
    </Form>
  )
}

export default SearchBar
